<template>
  <div>
    <div class="foot-infos pad-t-30 mar-t-3 flex">
      <div class="qrcode" v-if="enterpriseConfig && enterpriseConfig.websiteWechatAccountQrCodeUrl">
        <img :src="enterpriseConfig.websiteWechatAccountQrCodeUrl" alt="" class="width-98 height-98">
        <div class="text-align-c mar-t-11">官方微信公众号</div>
      </div>
      <div class="flex-item">
        <div class="flex infos-links infos">
          <div class="links-1" v-for="item in dataList" :key="item.componentGuideId">
            <h2 @click="handleJumpPage(item)">{{ item.text }}</h2>
            <ul class="font-12 font-color-6">
              <li v-for="children in item.childrenList" :key="children.componentGuideId"
                @click="handleJumpPage(children)"><span>{{ children.text}}</span></li>
            </ul>
          </div>
        </div>
      </div>
      <!-- <div class="contact infos">
        <h2>联系方式</h2>
        <ul class="font-12 font-color-6">
          <li><span>综合：0592-7772222</span></li>
          <li><span>客服：0592-7772222</span></li>
          <li><span>查件：0592-7772222</span></li>
        </ul>
      </div> -->
    </div>
    <div class="height-100" />
  </div>
</template>

<script lang="ts">
  import {
    defineComponent,
    ref,
    onMounted
  } from 'vue'
  import {
    getNavigationBarList
  } from '@/api/common/navigationBar'
  import {
    jumpPage
  } from '@/utils/jumpPageUtils'
  import {
    useRouter
  } from 'vue-router'
  import {
    useState
  } from '@/store/utils/useState'
  export default defineComponent({
    name: 'FooterLinks',
    setup() {
      const dataList = ref( < any > [])
      const enterpriseConfigStoreState = useState('enterpriseConfig', ['enterpriseConfig'])
      onMounted(() => {
        initNavigationBarList()
      })

      const initNavigationBarList = () => {
        getNavigationBarList(99).then(response => {
          dataList.value = response.data
        })
      }
      const router = useRouter()
      const handleJumpPage = (item) => {
        jumpPage(router, item.hasLink, item.linkTarget, item.linkType, item.linkParams, item.newPage)
      }

      return {
        dataList,
        handleJumpPage,
        ...enterpriseConfigStoreState
      }
    }
  })
</script>

<style lang="scss" scoped>
  $darkBlue: #182245;

  .foot-infos {
    width: 923px;
    margin: 0 auto;

    .infos {
      &.infos-links {
        margin-left: 142px;

        .links-1 {
          width: 150px;
        }

        .links-2 {
          width: 150px;
        }

        .links-3 {
          width: 135px;
        }

        .links-4 {
          width: 136px;
        }

        li {
          span {
            cursor: pointer;
          }

          &:last-child {
            padding-right: 0;
          }
        }
      }

      &.contact {
        margin-right: -12px;
        width: 127px;
      }

      h2 {
        font-weight: normal;
        margin: 0 0 7px 0;
        padding: 0;
        font-size: 14px;
      }

      ul {
        margin: 0;
        padding: 0;

        li {
          margin: 0;
          padding: 0;
          list-style: none;

          span {
            padding: 5px 0;
            display: inline-block;
          }
        }
      }
    }

    .sites {
      span {
        display: inline-block;
        vertical-align: top;
      }
    }
  }
</style>
